<template>
    <div class="wrapper">
        <router-view style="flex:1"></router-view>
        <div class="tabbar" append="tree">
            <tabitem v-for="item in tabItems" 
                :key="item.index" 
                :index="item.index" 
                :icon="item.icon" 
                :title="item.title" 
                :titleColor="item.titleColor"
                :image1="item.image" 
                :image2="item.selectedImage" 
                @tabItemOnClick="tabItemOnClick">
            </tabItem>
        </div>
    </div>
   
</template>

<script>

module.exports = {
    components: {
        tabitem: require('../include/tabitem.vue')
    },
    data: function () {
        return {
            dir: 'views/',
            tabItems: [{
                index: 0,
                title: '基础示例',
                titleColor: '#000000',
                icon: '',
                image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
                url: '/demos/basic',
                visibility: 'visible'
            }, {
                index: 1,
                title: '高级示例',
                titleColor: '#202020',
                icon: '',
                image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
                url: '/demos/advance',
                visibility: 'hidden'
            }, {
                index: 2,
                title: '完整演示',
                titleColor: '#0000ff',
                icon: '',
                image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
                url: '/demos/full',
                visibility: 'hidden'
            }]
        }
    },
    created: function () {
        console.log('Demo Home View is Created ');
        // jump('/demoHome/basic');
    },
    methods: {
        tabBarOnClick: function (e) {
            console.log('tabBarOnClick ', e.index);
        },
        tabItemOnClick : function(e) {
            this.selectedIndex = e.index;
            // this.select(e.index);
            console.log('click item ', e.index);
            this.$router.push('/demos/')
        }
    }
}
</script>

<style scoped>
.wrapper {
  width: 750;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  margin-bottom: 88;
}

.tabbar {
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88;
}
</style>
